import React from 'react';
import { DatePicker, message } from 'antd';
import { Button } from 'antd';

/*院感头部最外层*/
const LteHead = React.createClass({
  render() {
    return (
      <div className="header">
              <BoardScreen />
              <HeadLogo userTitle={this.props.userTitle}  />
              <NavBar userName={this.props.userName} url={this.props.url}  />
           </div>
        );
  }
});
/*log*/
const HeadLogo=React.createClass({
  render:function () {
    return (
      <a href="#" className="logo">{this.props.userTitle}</a>
    );
  }
});
/*创建遮罩层*/
const BoardScreen=React.createClass({
  hideAllBorder:function(){
      var boardscreen=document.getElementById("message");
      boardscreen.style.display="none";
      var boardscreen=document.getElementById("notice");
      boardscreen.style.display="none";
      var boardscreen=document.getElementById("task");
      boardscreen.style.display="none";
      var boardscreen=document.getElementById("personal");
      boardscreen.style.display="none";
  },
  handleClick:function(){
    var boardscreen=document.getElementById("boardscreen");
    boardscreen.style.display="none";
    this.hideAllBorder();
  },
  render:function(){
    return (
          <div className="boardscreen" id="boardscreen" onClick={this.handleClick} >
          </div>
      );
  }
});
/*创建头部导航组件*/
const NavBar=React.createClass({
  render:function(){
    return(
        <div className="navbar">
            <SideBarButton />
            <NavBarMenu userName={this.props.userName} url={this.props.url} />
        </div>
      );
  }
});
/*创建左边按钮切换*/
const SideBarButton=React.createClass({
    render:function(){
      return(
          <a href="#" className="sidebarbutton"><i className="icon-reorder"></i></a>
        );
    }
});
/*创建头部右侧导航菜单链接外框*/
const NavBarMenu=React.createClass({
    render:function(){
      return (
            <div className="navbarmenu">
                <ul className="navbar-nav">
                    <MessageMenuWrap notceIconClassName="icon-envelope-alt" bordertype="message" />
                    <NotificationsMenuWrap notceIconClassName="icon-bell-alt" bordertype="notice" />
                    <TasksMenuWrap notceIconClassName="icon-flag" bordertype="task" />
                    <PersonMenuWrap bordertype="personal" userName={this.props.userName} url={this.props.url} />
                    <li className="navmenulist"><ControlSidebar /></li>
                </ul>
            </div>
        );
    }
});
/*创建消息组件*/
const MessageMenuWrap=React.createClass({
  getInitialState:function(){
        return {
          data:[{
            src:"src/images/01.png",
            title:"消息1",
            content:"这是你收到的第一条消息",
            times:5
          },
          {
            src:"src/images/02.png",
            title:"消息2",
            content:"这是你收到的第二条消息",
            times:5
          },
          {
            src:"src/images/03.png",
            title:"消息3",
            content:"这是你收到的第三条消息",
            times:4
          },
          {
            src:"src/images/03.png",
            title:"消息4",
            content:"这是你收到的第三条消息",
            times:4
          },
          {
            src:"src/images/03.png",
            title:"消息5",
            content:"这是你收到的第三条消息",
            times:5
          }]
        };
  },
  render:function(){
    return (
        <li className="navmenulist"><MessageMenu notceIconClassName={this.props.notceIconClassName} messageNum={this.state.data.length} bordertype={this.props.bordertype} /><BoardWrap data={this.state.data} bordertype={this.props.bordertype}  /></li>
      );
    }
  });
/*创建信息图标*/
const MessageMenu=React.createClass({
  hideAllBorder:function(){
      var boardscreen=document.getElementById("message");
      boardscreen.style.display="none";
      var boardscreen=document.getElementById("notice");
      boardscreen.style.display="none";
      var boardscreen=document.getElementById("task");
      boardscreen.style.display="none";
      var boardscreen=document.getElementById("personal");
      boardscreen.style.display="none";
  },
  handelClick:function(e){
    e.stopPropagation();
    e.preventDefault();
    var boardscreen=document.getElementById("boardscreen");
     boardscreen.style.display="block";
    var oborderwrap=document.getElementById(this.props.bordertype);
    var oDisplayStyle=(oborderwrap.currentStyle? oborderwrap.currentStyle : window.getComputedStyle(oborderwrap, null)).display;
    if (oDisplayStyle=="none") {
      this.hideAllBorder();
      oborderwrap.style.display="block";
    }else {
      oborderwrap.style.display="none";
    }  
  },
  showNoticeNum:function(){
     if (parseInt(this.props.messageNum)<=4) {
        return (
            <span className="label label-success">{this.props.messageNum}</span>
          );
     }
     else if (parseInt(this.props.messageNum)<=9) {
       return (
            <span className="label label-warning">{this.props.messageNum}</span>
        );
     }else {
       return (
            <span className="label label-danger">{this.props.messageNum}</span>
        )
     }
  },
  render:function(){
        if (this.props.bordertype=="personal") {
          return (
                <a href="#" className="navbarlsta personmenu" onClick={this.handelClick}>
                <img src={this.props.url} /><span>{this.props.userName}</span>
                </a>
            );
        }else {
          return (

                <a href="#" className="navbarlsta messagemenu" onClick={this.handelClick}>
                <i className={this.props.notceIconClassName} />
                 {this.showNoticeNum()}
                </a>
            );
        }
/*    return(
          <a href="#" className="navbarlsta messagemenu" onClick={this.handelClick}>
              <i className={this.props.notceIconClassName} />
              {this.showNoticeNum()}
          </a>
      );*/
  }
});
/*创建通知组件*/
const NotificationsMenuWrap=React.createClass({
   getInitialState:function(){
        return {
          data:[{
            id:0,
            notceIconClassName:"icon-user c00c0ef",
            content:"5 new members joined today"
          },
          {
            id:1,
            notceIconClassName:"icon-warning-sign cf39c12",
            content:" Very long description here that may not fit into the page and may cause design problems"
          },
          {
            id:2,
            notceIconClassName:"icon-truck cdd4b39",
            content:" 5 new members joined"
          }]
        };
  },
  render:function(){
          return (
            <li className="navmenulist"><MessageMenu notceIconClassName={this.props.notceIconClassName} messageNum={this.state.data.length} bordertype={this.props.bordertype} /><BoardWrap data={this.state.data} bordertype={this.props.bordertype} /></li>);
  }
});

/*创建通知图标*/
/*const NotificationsMenu=React.createClass({
  render:function(){
    return(
          <a href="#" className="navbarlsta notifications">
              <i className="icon-bell-alt" />
              <span className="label label-warning">4</span>
          </a>
      );
  }
});*/
/*创建任务组件*/
const TasksMenuWrap=React.createClass({
    getInitialState:function(){
       return {
          data:[{
            id:0,
            title:"Design somebuttons",
            percent:"20%"
           },
          {
            id:1,
            title:"Design buttons",
            percent:"50%"
          },
          {
            id:2,
            title:"Designs ome",
            percent:"80%"
          },
          {
            id:3,
            title:"Designs ome",
            percent:"50%"
          }]
        };
  },
  render:function(){
          return (
            <li className="navmenulist"><MessageMenu notceIconClassName={this.props.notceIconClassName} messageNum={this.state.data.length} bordertype={this.props.bordertype} /><BoardWrap data={this.state.data} bordertype={this.props.bordertype} /></li>);
  }    
  }
);
/*创建个人中心组件*/
const PersonMenuWrap=React.createClass({
  render:function(){
    return (
      <li className="navmenulist"><MessageMenu userName={this.props.userName} url={this.props.url} bordertype={this.props.bordertype} /><BoardWrap bordertype={this.props.bordertype} /></li>
    );
  }
});

/*创建任务图标*/
/*const TasksMenu=React.createClass({
  render:function(){
    return(
          <a href="#" className="navbarlsta tasksmenu">
              <i className="icon-flag" />
              <span className="label label-danger">4</span>
          </a>
      );
  }
});*/
/*个人中心*/
/*const PersonMenu=React.createClass({
    render:function(){
      return (
            <a href="#" className="navbarlsta personmenu">
              <img src={this.props.url} /><span>{this.props.userName}</span>
            </a>
        );
    }
});*/
/*创建头部右侧设置图标*/
const ControlSidebar=React.createClass({
    render:function(){
      return(
            <a href="#" className="navbarlsta controlsidebar">
                <i className="icon-cogs" />
            </a>
        );
    }

});

/*创建信息下拉列表*/
//下拉列表的外框
const BoardWrap=React.createClass({
    render:function(){
      if(this.props.bordertype=="message") {
          var messageNum=this.props.data.length;
          return (
            <div className="dropboard borderwrap" id={this.props.bordertype}>
                <BorderHead  messageNum={messageNum} />
                <MessageList data={this.props.data} />
                <BorderFoot />
            </div>
        );
      }
      else if(this.props.bordertype=="notice") {
          var messageNum=this.props.data.length;
          return (
            <div className="dropboard borderwrap" id={this.props.bordertype}>
                <BorderHead  messageNum={messageNum} />
                <NoticeList data={this.props.data} />
                <BorderFoot />
            </div>
        );
      }
      else if(this.props.bordertype=="task") {
          var messageNum=this.props.data.length;
          return (
            <div className="dropboard borderwrap" id={this.props.bordertype}>
                <BorderHead  messageNum={messageNum} />
                <TaskList data={this.props.data} />
                <BorderFoot />
            </div>
        );
      }
      else if(this.props.bordertype=="personal") {
          return (
            <div className="dropboard borderwrap" id={this.props.bordertype}>
                <PersonCon />
            </div>
        );
      }
      
    }
});
/*下拉板块头部*/
const BorderHead=React.createClass({
    render:function(){
      return(
          <div className="borderhead">
              You have {this.props.messageNum} messages
          </div>
        )
    }

});
/*下拉板块底部*/
const BorderFoot=React.createClass({
    render:function(){
      return(
          <div className="borderfoot">
             <a href="#">See All Messages</a>
          </div>
        )
    }

});
/*消息列表*/
const MessageList=React.createClass({
    render:function(){
      var messageNode=this.props.data.map(function(messages){
          return (
            <MessagesCon key={messages.title} src={messages.src} title={messages.title} content={messages.content} times={messages.times} />
          );
      });
      return (

              <div className="messagelist">
                  {messageNode}
              </div>
        );
    }
});
/*消息内容*/
const MessagesCon=React.createClass({
    render:function(){
      return (
            <div className="messagecon">
                <a href="#">
                    <div className="messageimg">
                        <img src={this.props.src} className="img-circle" alt="User Image" />
                    </div>
                    <h4>
                        {this.props.title}
                        <small><i className="icon-time"></i> {this.props.times} mins</small>
                    </h4>
                    <p>{this.props.content}</p>
                </a>
            </div>
        );
    }
});
/*通知下拉列表 */
/*消息列表*/
const NoticeList=React.createClass({
    render:function(){
      var noticeNode=this.props.data.map(function(notices){
          return (
            <NoticeCon key={notices.id} notceIconClassName={notices.notceIconClassName}  content={notices.content}  />
          );
      });
      return (
              <div className="noticelist">
                  {noticeNode}
              </div>
        );
    }
});
const NoticeCon=React.createClass({
  render:function(){
      return ( 
        <div className="noticecon">
                  <a href="#">
                      <i className={this.props.notceIconClassName} />
                      <span>{this.props.content}</span>
                  </a>
       </div>
       );
  }

});
const TaskList=React.createClass({
  render:function(){
      var noticeNode=this.props.data.map(function(notices){
          return (
            <TaskCon key={notices.id} title={notices.title}  percent={notices.percent}  />
          );
      });
      return (
              <div className="tasklist">
                  {noticeNode}
              </div>
        );
    }
});
const TaskCon=React.createClass({
  render:function(){
     return (
        <div className="noticecon tackcon">
            <a href="#">
                <h3>
                  {this.props.title}
                   <small className="pull-right">{this.props.percent}</small>
                </h3>
                <div className="progress">
                     {
                      (function(that){
                        var style={
                          width:that.props.percent
                        };
                          if(parseFloat(that.props.percent)<30){
                            return (
                              <div className="progress-bar progress-bar-green" style={style}  role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
                              );
                          }
                          else if(parseFloat(that.props.percent)<60) {
                             return (
                              <div className="progress-bar progress-bar-organge" style={style}  role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
                              );
                          }
                          else {
                             return (
                              <div className="progress-bar progress-bar-red" style={style}  role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
                              );
                          }
                      }(this))
                     }
                </div>
            </a>
        </div>
      );
  }
});
const PersonCon=React.createClass({
  render:function(){
    return (
          <div className="personcon">
              <div className="user-header">
                  <img src="src/images/user.jpg" />
                  <p>Alexander Pierce - Web Developer</p>
              </div>
              <div className="user-footer">
                    <div className="pull-left">
                      <Button>Profile</Button>
                    </div>
                    <div className="pull-right">
                      <Button>Sign out</Button>
                    </div>
              </div>
          </div>
      );
  }
});
export default LteHead;